<script setup>
import {shallowRef, watchEffect} from 'vue'

// 创建浅层响应式对象
const shallowObj = shallowRef({name: 'Alice', age: 20})

// 监听变化
watchEffect(() => {
  console.log('当前值:', shallowObj.value.name)
})

// 直接修改对象属性 - 不会触发响应式更新
shallowObj.value.name = 'Bob'  // 无输出

// 替换整个对象 - 会触发响应式更新
shallowObj.value = {name: 'Charlie', age: 22}  // 输出: 当前值: Charlie

import {shallowReactive, watchEffect} from 'vue'

// 创建浅层响应式对象
const shallowData = shallowReactive({
  user: {name: 'Alice'},  // 嵌套对象不会被响应式处理
  age: 20
})

// 监听变化
watchEffect(() => {
  console.log('用户名称:', shallowData.user.name)
  console.log('年龄:', shallowData.age)
})

// 修改顶层属性 - 会触发响应式更新
shallowData.age = 21  // 输出: 用户名称: Alice, 年龄: 21

// 修改嵌套对象属性 - 不会触发响应式更新
shallowData.user.name = 'Bob'  // 无输出

// 替换整个嵌套对象 - 会触发响应式更新
shallowData.user = {name: 'Charlie'}  // 输出: 用户名称: Charlie, 年龄: 21
</script>

<template>

</template>

<style scoped>

</style>